<template>
	<view class="bind-box">
		<!-- 提示信息 -->
		<view class="bind-tip-box">
			<text>点击</text>
			<image class="bind-tip-icon" src="/static/scan_icon.png" mode="aspectFit"></image>
			<text>扫一扫，获取终端机具TUSN号</text>
		</view>
		<!-- 终端机具号输入 -->
		<view class="bind-code-box">
			<input class="bind-code-input" placeholder-style="color:#909399" placeholder="请输入终端机具的TUSN号" v-model="deviceCode" />
			<image class="bind-scan-icon" src="/static/scan_icon.png" mode="aspectFit" @tap="showScan"></image>
		</view>
		<view class="bind-btn">确认绑定</view>
		<!-- 示例提示文字 -->
		<view class="bind-example-text-box">
			<text>扫描示例</text>
			<text>请扫码机具背面的条码</text>
		</view>
		<!-- 示例图片 -->
		<view class="bind-example-box">
			<image class="bind-example-img" src="/static/bar_img.png" mode="widthFix"></image>
		</view>
	</view>
</template>

<script setup>
	import { onLoad ,onUnload} from '@dcloudio/uni-app'
	import { ref } from 'vue'
	//机具号
	let deviceCode = ref('')
	
	onLoad(()=>{
		//获取扫码结果
		uni.$on('getScanResult',(res)=>{
			console.log('扫码结果：',res)
			deviceCode.value = res
		})
	})
	onUnload(()=>{
		uni.$off('getScanResult')
	})
	//扫码
	const showScan = ()=>{
		uni.navigateTo({
			url:'/pages/home/scan/scan'
		})
	}
</script>

<style lang="scss" scoped>
	.bind-box{
		display: flex;
		flex-direction: column;
		padding: 30rpx;
		box-sizing: border-box;
		.bind-tip-box{
			display: flex;
			align-items: center;
			justify-content: center;
			padding: 10rpx;
			font-size: 24rpx;
			color: $xh-color-606266;
			.bind-tip-icon{
				width: 28rpx;
				height: 28rpx;
				margin: 0 10rpx;
			}
		}
		.bind-code-box{
			display: flex;
			align-items: center;
			justify-content: space-between;
			background-color: white;
			height: 100rpx;
			padding: 0 30rpx;
			border-radius: 15rpx;
			margin-top: 30rpx;
			.bind-scan-icon{
				width: 28rpx;
				height: 28rpx;
				padding: 20rpx 0;
				margin-left: 30rpx;
			}
			.bind-code-input{
				font-size: 28rpx;
				flex: 1;
			}
		}
		.bind-btn{
			font-size: 32rpx;
			text-align: center;
			line-height: 88rpx;
			height: 88rpx;
			border-radius: 44rpx;
			background-color: $xh-theme-color;
			color: white;
			margin: 40rpx 30rpx;
		}
		.bind-example-text-box{
			display: flex;
			flex-direction: column;
			align-items: center;
			color: $xh-title-color;
			font-size: 28rpx;
			text:nth-of-type(2){
				color: $xh-subtitle-color;
				margin-top: 10rpx;
			}
		}
		.bind-example-box{
			background-color: white;
			box-sizing: border-box;
			padding: 40rpx 30rpx; 
			margin-top: 30rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			.bind-example-img{
				width: 100%;
			}
		}
	}
</style>
